<template>
    <div class="parent">
        <div class="navList">
            <div class="listItem" @click="openList('region')" :class="[this.isActive('region')]">
                <text class="text" :class="[this.textActive('region')]">行政区划</text>
                <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}"  :class="[this.isOpenKey == 'region'?'open':'']">{{'\ue60b'}}</text>
            </div>
            <div class="listItem" @click="openList('time')" :class="[this.isActive('time')]">
                <text class="text" :class="[this.textActive('time')]">查询月度</text>
                <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}"  :class="[this.isOpen('time')]">{{'\ue60b'}}</text>
            </div>
            <div class="listItem" @click="openList('tabCont')" :class="[this.isActive('tabCont')]">
                <text class="text" :class="[this.textActive('tabCont')]">报表内容</text>
                <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}"  :class="[this.isOpen('tabCont')]">{{'\ue60b'}}</text>
            </div>
        </div>
        <listCont @selectItem="selectItem"></listCont>
        <listCont :is="currentTab" @closeList="closeContent" :datalist="datalist"></listCont>
    </div>
</template>
<script>
import monthSlistCont from '../views/living/listCont'
import creatCity from '../views/living/creatCity'
import environmentalListCont from '../views/living/environmentalListCont'
import region from './region'
import time from './time'
import tabCont from './tabCont'
import { addIconFontSupport } from '../config/iconConfig.js'
import { getCache } from '../util/storageUtils';
import { CTCE_USER_INFO } from '../config/storageTypes';
import event from '../net/event'
const eventBus = weex.requireModule('bmEvents')
const dom = weex.requireModule('dom')
const modal = weex.requireModule('modal')
export default {
    name: 'month',
    data () {
        return {
            pIndexKey:'',
            isOpenKey: '',
            textActiveKey: '',
            currentTab: 'monthSlistCont',
            xzqhdm: '',
            datalist: []
        }
    },
    components: {
        region,
        time,
        tabCont,
        monthSlistCont,
        creatCity,
        environmentalListCont
    },
    beforeCreate () {
        this.$notice.loading.show()
        addIconFontSupport(dom, "../")
    },
    created () {
        this.$navigator.setNavigationInfo({
            title: '人居环境整治进度月度统计分析',
            navShow: true,
            statusBarStyle: 'LightContent'
        })
        getCache(CTCE_USER_INFO).then(res => {
            const data = JSON.parse(res)
            this.xzqhdm = data.xzqhdm
            event.getTJ9(data.xzqhdm, '').then(val => {
                this.datalist = val.datalist
                this.currentTab = monthSlistCont
                this.$nextTick(() => {
                    this.$notice.loading.hide()
                })
            })
        })
        eventBus.on('monthEvent', (param) => {
            if(param) {
                event.getTJ9(this.xzqhdm, param).then(val => {
                    this.datalist = val.datalist
                    this.currentTab = monthSlistCont
                    this.$nextTick(() => {
                        this.$notice.loading.hide()
                    })
                })
            } else {
                event.getTJ9(this.xzqhdm, '').then(val => {
                    this.datalist = val.datalist
                    this.currentTab = monthSlistCont
                    this.$nextTick(() => {
                        this.$notice.loading.hide()
                    })
                })
            }
        })
        eventBus.on('xzqhEvent', (param) => {
            if (param) {
                this.xzqhdm = param
                event.getTJ9(param, '').then(val => {
                    this.datalist = val.datalist
                    this.currentTab = monthSlistCont
                    this.$nextTick(() => {
                        this.$notice.loading.hide()
                    })
                })
            } else {
                getCache(CTCE_USER_INFO).then(res => {
                    const data = JSON.parse(res)
                    this.xzqhdm = data.xzqhdm
                    event.getTJ9(data.xzqhdm, '').then(val => {
                        this.datalist = val.datalist
                        this.currentTab = monthSlistCont
                        this.$nextTick(() => {
                            this.$notice.loading.hide()
                        })
                    })
                })
            }
        })
        eventBus.on('tabEvent', (param) => {
            switch(param) {
                case 0: 
                    this.currentTab = monthSlistCont
                break;
                case 1: 
                    this.currentTab = creatCity
                break;
                case 2: 
                    this.currentTab = environmentalListCont
                break;
            }
        })
    },
    methods: {
        isActive (_c) {
            return this.pIndexKey === _c ?'openColor':''
        },
        isOpen (index) {
            return this.isOpenKey === index ?'open':''
        },
        textActive (ind) {
            return this.textActiveKey === ind ? 'textColor' : ''
        },
        openList (_key) {
            if(this.pIndexKey === _key || this.isOpenKey === _key || this.textActiveKey === _key) {
                this.pIndexKey = '';
                this.isOpenKey = '';
                this.textActiveKey = '';
                this.currentTab = '';
            } else {
                this.pIndexKey = _key;
                this.isOpenKey = _key;
                this.textActiveKey = _key;
                this.currentTab = _key;
            }
        },
        closeContent () {
            this.pIndexKey = ''
            this.isOpenKey = ''
            this.currentTab = ''
            this.textActiveKey = ''
        },
    }
}
</script>
<style scoped>
.parent{
    width: 750px;
    flex: 1;
    background-color: #eee;
}
.navList{
  width: 750px;
  height: 96px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border-bottom-color: #eee;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  background-color: white;
}
.listItem{
  width: 250px;
  height: 96px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.special{
  border-right-width: 0;
}
.text{
  font-size:28px;
  font-family:NotoSansHans-Regular;
  color:rgba(151,151,151,1);
}
.bar-ic{
  font-size: 20px;
  color: rgba(151,151,151,1);
  padding-right: 10px;
}
.open{
  transform: rotate(180deg);
  color: rgba(255,255,255,1);
}
.openColor{
  width: 250px;
  height: 60px;
  background-color: rgba(35,196,160,1);
  color: rgba(255,255,255,1);
}
.textColor{
    color: rgba(255, 255, 255, 1);
}
</style>
